<template>
  <div id="app">
    <Tabs :value="value" @getIndex="getCurrentIndex">
      <Tab label="话题" index="1">
        <Topic />
      </Tab>
      <Tab label="产品" index="2">
        <div class="listinfoInfo"><ListInfoInfo /></div>
      </Tab>
      <Tab label="视频" index="3">
        <CollectVideo />
      </Tab>
    </Tabs>
  </div>
</template>
<script>
import Topic from "../../components/Topic"
import ListInfoInfo from "../../components/ListInfoInfo"
import CollectVideo from "../../components/CollectVideo"
export default {
  name: "CollectTab",
  data() {
    return{
      value:1
    }
  },

  methods:{
    getCurrentIndex(value){
      this.value = value;
    }
  
  },
  components: {
      Topic,
      ListInfoInfo,
      CollectVideo
    }
};
</script>
<style scoped>
.listinfoInfo {
  position: absolute;
  top:45px;
}

.tabs {
  /* display: box; */
  width: 100%;
  margin-top: 20px;
  font-size: 16px;
}
.tab {
  /* box-flex: 1; */
  width: 33%;
  text-align: center;
  border-right: 1px solid gray;
  margin: 0 !important;
}
.tab:nth-child(3){
  border:none;
}
</style>
